<template>
	<xn-form-container
		width="100%"
		:closable="false"
		:get-container="false"
		:style="{ position: 'absolute' }"
		:body-style="{ background: '#f0f2f5' }"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<template #title>
			<span>出库管理详情</span>
			<a-button style="float: right" @click="onClose">返回</a-button>
		</template>

		<a-card :bordered="false">
			<a-row :gutter="24" style="margin-bottom: 12px">
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>出库单号:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.code }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>销售方式:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.saleMethod }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>仓库:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.warehouseName }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>销售员:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.salePerName }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
			<a-row :gutter="24" style="margin-bottom: 12px">
				<a-col :span="6">
					<a-row>
						<a-col :span="9">
							<span>收货人手机号:</span>
						</a-col>
						<a-col :span="15">
							<span>{{ formData.phone }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="9">
							<span>收货人地址:</span>
						</a-col>
						<a-col :span="15">
							<span>{{ formData.address }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>操作人:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainCreateUser(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>操作日期:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainCreateTime(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>

			<a-row :gutter="24" style="margin-bottom: 12px">
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>付款日期:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.payDate }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-row>
						<a-col :span="7">
							<span>备注:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.remark }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="6">
					<a-row style="color: red">
						<a-col :span="7">
							<span>审核状态:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.approveStatus }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6" v-if="formData.approveUserName">
					<a-row>
						<a-col :span="7">
							<span>审核人:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainApprover(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6" v-if="formData.approveTime">
					<a-row>
						<a-col :span="7">
							<span>审核日期:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ bizTool.obtainApproverTime(formData) }}</span>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6" v-if="formData.refuseReason">
					<a-row>
						<a-col :span="7">
							<span>拒绝理由:</span>
						</a-col>
						<a-col :span="17">
							<span>{{ formData.refuseReason }}</span>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
		</a-card>
		<a-row>
			<a-col :span="24">
				<a-row>
					<a-button class="childAddButton"> 商品明细 </a-button>
				</a-row>

				<a-table
					:pagination="false"
					:columns="goodsColumns"
					:data-source="formData.saleSheetDetailAddParamList"
					:scroll="{ x: 1000 }"
				>
					<template #bodyCell="{ index, record, column }">
						<template v-if="column.dataIndex === 'index'">
							<span>{{ index + 1 }}</span>
						</template>

						<template v-if="column.dataIndex === 'saleNum'">
							<a-input v-if="engineerOrder" disabled :style="{ width: column.width }" defaultValue="0" />
							<a-input v-else disabled :style="{ width: column.width }" v-model:value="record.saleNum" />
						</template>

						<template v-if="column.dataIndex === 'outNum'">
							<a-input :style="{ width: column.width }" v-model:value="record.outNum" disabled />
						</template>
						<template v-if="column.dataIndex === 'remark'">
							<a-input disabled :style="{ width: column.width }" v-model:value="record.remark" />
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>

		<div style="margin-top: 15px">
			<span style="color: #333; font-size: 16px; font-weight: 600">合计</span>
		</div>
		<a-row :gutter="24" style="margin-bottom: 50px; margin-top: 15px; margin-left: 20px">
			<a-col :span="6">
				<div style="margin-right: 12px; display: inline-block">
					<span>出库数量:</span>
				</div>
				<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="totalSaleNum" />
			</a-col>
			<a-col :span="6">
				<div style="margin-right: 12px; display: inline-block">
					<span>含税总金额</span>
				</div>
				<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="taxAmount" />
			</a-col>
			<a-col :span="6">
				<div style="margin-right: 12px; display: inline-block">
					<span>不含税总金额</span>
				</div>
				<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="noTaxAmount" />
			</a-col>
		</a-row>
		<a-row style="margin-top: 50px" justify="center">
			<a-space size="middle">
				<a-button
					v-if="formData.approveStatus == bizTool.audit && hasPerm('SALES_OUTBOUND_APPROVED')"
					:loading="passLoading"
					type="primary"
					style="width: 100px; border-radius: 5px"
					@click="approval"
					>审核通过</a-button
				>
				<a-button
					v-if="formData.approveStatus == bizTool.audit && hasPerm('SALES_OUTBOUND_APPROVED')"
					:loading="rejectLoading"
					danger
					style="width: 100px; border-radius: 5px"
					@click="approvalRejection"
					>审核拒绝</a-button
				>
				<a-button v-if="hasPerm('SALES_OUTBOUND_PRINT')" type="primary" ghost style="width: 100px; border-radius: 5px"
					>打印</a-button
				>
				<a-button style="width: 100px; border-radius: 5px" @click="onClose">关闭</a-button>
			</a-space>
		</a-row>
		<pass-reject-form :visibleAttachment="false" ref="passRejectFormRef" @ok="passRejectFormOk" />
	</xn-form-container>
</template>

<script setup name="salesOutboundInfo">
	import salesheetApi from '@/api/sale/salesheetApi'

	import dayjs from 'dayjs'
	import bizTool from '@/utils/bizTool'
	import PassRejectForm from '@/views/flw/task/todoTask/passRejectForm.vue'
	import { Modal } from 'ant-design-vue'
	// 定义emit事件
	//PROCUREMENT_PARTNERS
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	const visible = ref(false)
	const engineerOrder = ref(false)
	const rejectLoading = ref(false)
	const passLoading = ref(false)
	const passRejectFormRef = ref()

	// 表单数据，也就是默认给一些数据
	const formData = ref({})
	const totalSaleNum = ref(0)
	const taxAmount = ref(0)
	const noTaxAmount = ref(0)
	const passRejectFormOk = (value) => {
		let refuseReason = value.comment
		rejectLoading.value = true
		salesheetApi
			.approveRefuse({
				id: formData.value.id,
				refuseReason: refuseReason
			})
			.then(() => {
				visible.value = false
				emit('successful')
			})
			.catch(() => {})
			.finally(() => {
				rejectLoading.value = false
			})
	}

	const approval = () => {
		Modal.confirm({
			title: '提示信息',
			content: '是否执行审核通过操作？',
			maskClosable: false,
			okText: '确定',
			cancelText: '取消',
			onOk() {
				passLoading.value = true
				salesheetApi
					.approvePass({
						id: formData.value.id
					})
					.then(() => {
						visible.value = false
						emit('successful')
					})
					.catch(() => {})
					.finally(() => {
						passLoading.value = false
					})
			},
			onCancel() {}
		})
	}

	const approvalRejection = () => {
		passRejectFormRef.value.onOpen('REJECT', true)
	}
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value = {}
		let params = { ...record }
		params.payDate = dayjs(params.payDate).format('YYYY-MM-DD HH:mm')
		totalSaleNum.value = record.saleNum
		noTaxAmount.value = record.noTaxAmount
		taxAmount.value = record.taxAmount
		formData.value = { ...params }
		loadDetail(record)
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})

	const loadDetail = (record) => {
		salesheetApi
			.detail({
				id: record.id
			})
			.then((res) => {
				let detailList = res.proSaleSheetDetailList
				detailList.forEach((it) => {
					it['id'] = it['materialId']
					it['key'] = it['materialId']
				})
				formData.value.saleSheetDetailAddParamList = detailList
			})
			.catch(() => {})
	}

	const goodsColumns = [
		{
			title: '序号',
			width: 80,
			dataIndex: 'index',
			align: 'center'
		},
		{
			title: '编号',
			width: 120,
			dataIndex: 'code',
			align: 'center',
			ellipsis: true,
			customRender: ({ record }) => {
				return record.code || record.productCode
			}
		},
		{
			title: '名称',
			dataIndex: 'name',
			width: 180,
			align: 'center',
			ellipsis: true,
			customRender: ({ record }) => {
				return record.materialName || record.productName
			}
		},
		{
			title: '单位',
			dataIndex: 'unit',
			width: 100,
			align: 'center',
			customRender: ({ record }) => {
				return record.unit || record.productUnit
			}
		},
		{
			title: '型号',
			dataIndex: 'spec',
			width: 120,
			align: 'center',
			customRender: ({ record }) => {
				return record.spec || record.productSpec
			}
		},
		{
			title: '价格',
			dataIndex: 'price',
			width: 120,
			align: 'center'
		},
		{
			title: '销售数量',
			dataIndex: 'saleNum',
			width: 120,
			align: 'center'
		},
		{
			title: '税率',
			dataIndex: 'taxRate',
			width: 120,
			align: 'center'
		},
		{
			title: '剩余出库数量',
			dataIndex: 'remainingQuantity',
			width: 120,
			align: 'center'
		},
		{
			title: '出库数量',
			dataIndex: 'outNum',
			width: 120,
			align: 'center'
		},

		{
			title: '含税金额',
			dataIndex: 'taxPrice',
			width: 120,
			align: 'center'
		},
		{
			title: '不含税金额',
			dataIndex: 'noTaxPrice',
			width: 140,
			align: 'center'
		},
		{
			title: '备注',
			dataIndex: 'remark',
			width: 200,
			align: 'center'
		}
	]
</script>

<style scoped :type="less">
	.childAddButton {
		margin-bottom: 12px;
		margin-top: 12px;
	}
</style>
